<script setup>
import { ref, onMounted } from 'vue'
const list = ref([])
const startYear = 1984
const startMonth = 6
let width = 10
let height = 10
onMounted(() => {
  // 获取设备的宽度
  width = document.documentElement.clientWidth
  height = document.documentElement.clientHeight
  // 获取当前的年份
  const currentYear = new Date().getFullYear()
  // 获取当前的月份，+1
  const currentMonth = new Date().getMonth() + 1
  console.log(1)
  for (let i = 0; i <= 70; i++) {
    for (let j = 1; j <= 12; j++) {
      const curYear = startYear + i
      list.value.push({
        id: curYear + '-' + j,
        year: curYear,
        things: {g:[], b:[]},
        month: j,
        state: ((curYear > currentYear) || (curYear == currentYear && j > currentMonth)) ? 1 : (curYear === currentYear && j == currentMonth) ? 0 : -1
      })
    }
  }
  list.value.splice(0, startMonth - 1)
  getData()
})
const getData = () => {
  // 使用fetch 发送请求获取数据
  fetch('./data.json').then(res => res.json()).then(data => {
    list.value.forEach(item => {
      item.things = data[item.id] ? 
        data[item.id] : {g:[], b:[]}
    })
        
  })
}
const getClass = (item) => {
  
  const c1 = item.state === 0 ? 'bg-current' : item.state === 1 ? 'bg-gray-100':'bg-gray-700'

  return [c1]
}
const getPos = (idx) => {
  
  return "top-5 left-5 "
} 
const hMouse = (e) => {
  console.dir(e.target.offsetLeft)
  if(e.target.offsetLeft < width/2) {
    e.target.classList.add('left')
  } else {
    e.target.classList.add('right')
  }

  if(e.target.offsetTop < height/2) {
    e.target.classList.add('top')
  } else {
    e.target.offsetTop.add('bottom')
  }

}
</script>

<template>
  <div class="container mx-auto">
    <h1 class="text-center text-2xl p-5">我的人生格子</h1>
    <div class="flex flex-wrap gap-2">
      <div @mouseenter="hMouse" class="w-8 h-8 relative group hover:bg-current flex justify-around items-center"
        :class="getClass(item)" v-for="(item, idx) in list"
        :key="idx">
        <span class="inline-block rounded-full w-2 h-2" v-if="item.things.g.length" :class="'bg-teal-'+item.things.g.length*100"></span>
        <span class="inline-block rounded-full w-2 h-2" v-if="item.things.b.length" :class="'bg-red-'+item.things.g.length*100"></span>
        <div class="hidden group-hover:block absolute z-10 bottom-4  bg-white w-40 p-4">
          <h3>{{ item.year }}-{{ item.month }}</h3>
          <p v-for="it in item.things.g" :key="it">{{ it }}</p>
          <p v-for="it in item.things.b" :key="it">{{ it }}</p>
          
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.left .absolute{left: 20px;}
.right .absolute{right: 20px;}

.bg-red-100{background-color: rgb(253, 231, 231);}
.bg-red-200{background-color: rgb(250, 204, 210);
}
.bg-teal-100{background-color: rgb(204, 251, 241);}
.bg-teal-200{background-color: rgb(153, 246, 228);}
.bg-teal-300{background-color: rgb(94, 234, 212);}
.bg-teal-400{background-color: rgb(45, 212, 191);}
.bg-teal-500{background-color: rgb(20, 184, 166);}

.text-teal-100{color: rgb(204, 251, 241);}
.text-teal-200{color: rgb(153, 246, 228);}
.text-teal-300{color: rgb(94, 234, 212);}
.text-teal-400{color: rgb(45, 212, 191);}
.text-teal-500{color: rgb(20, 184, 166);}

.bg-red-100{background-color: rgb(254, 226, 226);}
.bg-red-200{background-color: rgb(254, 202, 202);}
.bg-red-300{background-color: rgb(252, 165, 165);}
.bg-red-400{background-color: rgb(248, 113, 113);}
.bg-red-500{background-color: rgb(239, 68, 68);}

.text-red-100{color: rgb(254, 226, 226);}
.text-red-200{color: rgb(254, 202, 202);}
.text-red-300{color: rgb(252, 165, 165);}
.text-red-400{color: rgb(248, 113, 113);}
.text-red-500{color: rgb(239, 68, 68);}
</style>
